<template>
  <div class="load">
    <CardBox title="体验之路"></CardBox>
    <div class="content-container">
      <div class="box">
        <div class="timeline-container">
          <div
            class="timeline-item"
            v-for="(item, index) in timelineData"
            :key="index"
            :class="{ active: activeIndex === index }"
          >
            <div class="timeline-header"
                 @click="toggleItem(index, item.type)">
              <div class="timeline-title">
                <img v-show="activeIndex !== index" :src="require(`@/assets/img/road${index + 1}.png`)" alt="" class="timeline-img">
                <img v-show="activeIndex === index" :src="require(`@/assets/img/road-${index + 1}.png`)" alt="" class="timeline-img">
                <span class="pl-10">{{ item.title }}</span>
              </div>
              <div class="timeline-year">
                <img
                  src="@/assets/img/fold-icon1.png"
                  v-show="activeIndex === index"
                  alt=""
                  class="fold-icon1"
                />
                <img
                  src="@/assets/img/fold-icon2.png"
                  v-show="activeIndex !== index"
                  alt=""
                  class="fold-icon2"
                />
              </div>
            </div>
            <div class="timeline-content" v-show="activeIndex === index">
              <div
                class="item"
                v-for="(item, index) in item.content"
                :key="index"
                :class="{ active: activeItemIndex === index }"
                @click="itemClick(item,index)"
              >
                <span class="item-num">{{ index + 1 }}</span>
                <span class="item-title">{{ item.title }}</span>
                <img :src="item.img1" alt="" class="fold-icon" />
                <img :src="item.img2" alt="" class="fold-icon" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
import mainLoad from '@/assets/mainRoad.json';
export default {
  components: { CardBox },
  inject: ['imgUrl'], // 注入公共变量
  data() {
    return {
      mainLoad:{
        line:mainLoad,
        strokeColor:'#0EFF0A',
        strokeWeight:6
      },
      timelineData: [],
      activeIndex: 0,
      activeType: "bird",
      activeItemIndex: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods:{
    showMapItem(lineIndex,pointIndex){
      // if(this.timelineData[lineIndex].lines){
      //   for (let i = 0; i < this.timelineData[lineIndex].lines.length; i++) {
      //     this.timelineData[lineIndex].lines[i].strokeColor=i>pointIndex?'#F537FF':'#F08650';
      //     this.timelineData[lineIndex].lines[i].strokeWeight=5;
      //   }
      // }
      var lines=[];
      lines.push(this.mainLoad);
      var lon=0;
      var lat=0;
      var count=0;
      for (let i = 0; i < this.timelineData.length; i++) {
        for (let j = 0; j < this.timelineData[i].lines.length; j++) {
          if (i == lineIndex) {
            this.timelineData[i].lines[j].strokeColor = j > pointIndex ? '#f03d08' : '#f03d08';
            this.timelineData[i].lines[j].strokeWeight = 4;
            this.timelineData[i].lines[j].line.forEach(line => {
              lon+=line[0];
              lat+=line[1];
              count++;
            })
          }else {
            this.timelineData[i].lines[j].strokeColor = '#C0C0C0';
            this.timelineData[i].lines[j].strokeWeight = 4;
          }
          lines.push(this.timelineData[i].lines[j]);
        }
      }
      setTimeout(() => {
        EventBus.$emit('set-lines', lines);
        EventBus.$emit('set-position', {lon:lon/count, lat:lat/count,zoom:18});
        EventBus.$emit('set-route-item', this.timelineData[lineIndex].content[pointIndex]);
        EventBus.$emit('set-markers', this.timelineData[lineIndex].content);
      }, 500)
    },
    getData(){
      this.$api.route.getRouteList().then(response => {
        if (response) {
          this.timelineData=response;
          if(this.timelineData&&this.timelineData.length>0){
            for (let i = 0; i < this.timelineData.length; i++) {
              this.timelineData[i].lines=response[i].polylines?response[i].polylines.map(line => ({
                line: line,
                status: -1
              })):[];
              this.timelineData[i].img=require("@/assets/img/"+response[i].icon);
              this.timelineData[i].content=response[i].content?response[i].content.map(c => ({
                id: c.id,
                title: c.name,
                lonGd:c.lonGd,
                latGd:c.latGd,
                localName:c.name,
                localPhoto:c.image,
                icon:require("@/assets/img/guanchadian.png"),
                img1: require("@/assets/img/points1.png"),
                img2: require("@/assets/img/points2.png")
              })):[];
            }
          }
          this.showMapItem(0,0,this.timelineData[0].content[0]);
        }
      }).catch(error => {
        console.error('Error fetching device locations:', error);
      });
    },

    toggleItem(index, type) {
      if (this.activeIndex === index) {
        // this.activeIndex = -1;
      } else {
        this.activeIndex = index;
      }
      this.activeType = type;
      this.activeItemIndex = 0;
      this.showMapItem(this.activeIndex,this.activeItemIndex);
    },
    itemClick(item,index) {
      if(this.activeItemIndex == index){
        return;
      }
      this.activeItemIndex = index;
      this.showMapItem(this.activeIndex,this.activeItemIndex);
    },
  },
};
</script>
<style lang="scss" scoped>
.load {
  height: calc(100vh - 85px);
}
.timeline-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  .fold-line {
    width: calc(100% - 40px);
    height: 4px;
    padding: 0 20px;
    display: block;
  }
  .timeline-item {
    flex: 1;
    transition: all 0.3s ease;
    overflow: hidden;
    height: 58px;
    line-height: 58px;
    width: calc(100% - 40px);
    margin-bottom: 12px;
    background: url('@/assets/img/table-bg-1.png') no-repeat center center;
    background-size: 100% 58px;
    background-position: 0 0;
    &.active {
      min-height: 661px;
      max-height: 661px;
      overflow: auto;
      background: url('@/assets/img/table-bg-5.png') no-repeat center center;
      background-size: 100% 100%;
      .timeline-title {
        span{
          color: #07FFE5;
        }
      }
    }

    .fold-icon1 {
      width: 13px;
      height: 6px;
      position: relative;
      top: -4px;
      left: -2px;
    }

    .fold-icon2 {
      width: 13px;
      height: 14px;
      position: relative;
      top: 0px;
      left: -2px;
    }

    .timeline-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background-size: 100% 100%;
      cursor: pointer;

      .timeline-title {
        color: #fff;
        font-size: 16px;
      }

      .timeline-year {
        color: #fff;
        font-size: 18px;

        span {
          margin-right: 10px;
        }
      }
    }

    .timeline-content {
      padding: 0px 20px 20px 40px;
      overflow: auto;
      .item {
        &.active {
          .item-num {
            background: rgba(126, 255, 242, 1);
          }
          .item-title {
            color: #07FFE5;
          }
        }
        .item-num {
          width: 16px;
          height: 16px;
          display: inline-block;
          border-radius: 50%;
          background: rgba(218, 232, 255, 1);
          color: #00112c;
          font-size: 10px;
          text-align: center;
          line-height: 16px;
        }
        .item-title {
          color: #69cfff;
          font-size: 16px;
          margin-left: 10px;
        }
        img {
          width: 14px;
          height: 16px;
          margin-left: 7px;
        }
      }
    }
  }
}
</style>

